<!-- 积分商城-为你精选 -->
<template>
	<view class="choiceness">
		<u-row>
			<u-col span="4" offset="0.7">
				<view>
					<u--text bold size="18" text="为你精选"></u--text>
				</view>
			</u-col>
		</u-row>
		<u-row>
			<u-col span="11" offset="0.5">
				<view class="choiceness-shopping">
					<ul>
						<li v-for="(item,index) in list" :key="item.id"> 
							<view class="shopping-body">
								<u-row>
									<u-col span="11" offset="0.5">
										<view class="photo-view">
											<u--image :src="item.src" width="100%" height="350rpx" radius="8"></u--image>
										</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col offset="0.5" span="11">
										<view class="title-view">
											<u--text :text="item.name" bold size="16" lines="1"></u--text>
										</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col offset="0.5" span="11">
										<view class="price-view">
											<u-row>
												<u-col span="10.5">
													<view>
														<u--text :text="item.price" mode="price" color="red" bold size="18"></u--text>
													</view>
												</u-col>
												<u-col span="1.5">
													<view>
														<u-icon name="plus-circle-fill" size="25" color="rgb(255,188,13)"></u-icon>
													</view>
												</u-col>
											</u-row>
										</view>
									</u-col>
								</u-row>
							</view>				
						</li>
					</ul>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		name:"choiceness",
		data() {
			return {
				list: [{
						id:1,
						src:'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						name:'图片1',
						price:100,
					},
					{
						id:2,
						src:'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name:'图片2222222222222222222222222222',
						price:200,
					},
					{
						id:3,
						src:'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						name:'图片3',
						price:300,
					},
					{
						id:4,
						src:'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						name:'图片444444444444444444',
						price:400,
					},
					{
						id:5,
						src:'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name:'图片5555555555555555555555',
						price:500,
					},
					{
						id:6,
						src:'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						name:'图片6',
						price:600,
					}],
			};
		}
	}
</script>

<style lang="scss">
	//整体框架
	.choiceness{
		position: relative;
		top: 50rpx;
		
		//出售、兑换整体框架
		.choiceness-shopping{

			ul{
				list-style-type: none;
				padding: 0;
				display: flex;  
				flex-direction: row;  
				justify-content: space-between;  
				align-items: center;  
				flex-wrap: wrap;
				
				li{
					width: 50%;
				}
				
			}
			
			
			
			//出售、兑换单个商品的框架
			.shopping-body{
				height: 500rpx;

				position: relative;
				top: 10rpx;
				
				//图片框体
				.photo-view{
					height: 350rpx;
				}
				
				//商品名称标题
				.title-view{
					position: relative;
					top: 10rpx;
				}
				
				//商品价格
				.price-view{
					position: relative;
					top: 20rpx;
				
				}
			}
		}
	}
</style>